<template>
    <div class="app-container">


      

                <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">

                    <el-form-item label="订单号" prop="orderNo">
                        <el-input class="search-vitem" v-model="queryParams.orderNo" placeholder="订单号" clearable
                            />
                    </el-form-item>
					<el-form-item label="借款人" prop="companyName">
                        <el-input class="search-vitem" v-model="queryParams.borrowerName" placeholder="借款人" clearable
                           />
                    </el-form-item>
                    <el-form-item label="受让方" prop="companyName">
                        <el-input class="search-vitem" v-model="queryParams.companyName" placeholder="受让方" clearable
                           />
                    </el-form-item>
					<el-form-item label="小贷机构" prop="orgName">
					    <el-input class="search-vitem" v-model="queryParams.orgName" placeholder="小贷机构" clearable
					       />
					</el-form-item>

                   <!-- <el-form-item label="地区" prop="corporationTel">
                        <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="地区" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item> -->
					
					<el-form-item label="状态" prop="status">
					    <el-select class="search-vitem" v-model="queryParams.status"
					        clearable filterable placeholder="状态">
					       <el-option
					         v-for="dict in order_status"
					         :key="dict.value"
					         :label="dict.label"
					         :value="parseInt(dict.value)"
					       ></el-option>
					    </el-select>
					</el-form-item>

                  

                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>


                </el-form>

              
               
               <el-table v-loading="loading" :data="orderList" :row-style="{height: '46px'}">
               	<el-table-column label="订单号" width="160" align="center" prop="orderNo" fixed/>
               	<el-table-column label="借款人" width="120" align="center" prop="borrowerName" :show-overflow-tooltip="true" fixed/>
               	<el-table-column label="借款金额" width="120" align="center" prop="borrowAmount" fixed>
               		<template #default="scope">
               			{{scope.row.borrowAmount}}&nbsp;元
               			</template>
               		</el-table-column>
               	<el-table-column label="待放款金额"  width="120" align="center" prop="payTotalAmount" fixed>
               		<template #default="scope">
               		{{scope.row.borrowAmount-scope.row.applyTransferAmount}}&nbsp;元
               		</template>
               	</el-table-column>
               	<el-table-column label="收款人"  width="120" align="center" :show-overflow-tooltip="true" prop="cardAccount" fixed/>
               	<el-table-column label="状态"  width="100" align="center" prop="status" fixed>
               		<template #default="scope">
               			 <dict-tag :options="order_status" :value="scope.row.status"/>       
               		</template>
               	</el-table-column>
               	<el-table-column label="借款天数" width="100" align="center" :show-overflow-tooltip="true" prop="borrowDays" />
               
               	<el-table-column label="区域" width="200" align="center" :show-overflow-tooltip="true">
               		<template #default="scope">
               			{{scope.row.signProvince+"-"+scope.row.signCity}}
               			</template>
               	</el-table-column>
               	<el-table-column label="受让方" width="200" align="center" :show-overflow-tooltip="true" prop="companyName" />
               	<el-table-column label="小贷机构" width="200" align="center" :show-overflow-tooltip="true" prop="orgName" />
               	<el-table-column label="产品名称" width="80" align="center" prop="productName" />
               	<el-table-column label="申请日期" width="180"  align="center" prop="createDate">
               		<template #default="scope">
               		   <span>{{ scope.row.createDate }}</span>
               		</template>
               	</el-table-column>
               	<el-table-column label="签署方式" width="100"  align="center" prop="contractType" >
               		<template #default="scope">
               		  <span v-if="scope.row.contractType==1">线上</span>
               		  <span v-if="scope.row.contractType==2">线下</span>
               		</template>
               	</el-table-column>
               	<!-- <el-table-column label="进件员" width="100"  align="center" prop="orgName" /> -->
               
               	<el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width"  fixed="right">
               		<template #default="scope">
               			<!-- <el-button link type="primary" @click="handleUpdate(scope.row,'order')" v-hasPermi="['system:order:query']">详情</el-button> -->
               		</template>
               	</el-table-column>
               </el-table>
               

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList"/>

         

	</div>
</template>

<script setup name="ApplyFiles">
import {listOrder} from "@/api/system/order";
const { proxy } = getCurrentInstance();
const { order_status} = proxy.useDict('order_status');
const orderList = ref([]);
const open = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);



const data = reactive({

    form: {}, // 基本详情
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
		orgName: null,
        borrowerName: null,
        orderNo: null,
        status: null,
    },
   
});

const { queryParams, form } = toRefs(data);




/** 查询材料申请记录列表 */
	function getList() {
		loading.value = true;
		listOrder(queryParams.value).then(response => {

			orderList.value = response.rows;
			total.value = Number(response.total);
			loading.value = false;
		});
	}
	
	

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}






getList();

</script>

<style lang="scss">


	
.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }

    .showline {
        width: 100%;
        height: 8px;
        background: #f4f7fc;
        margin-bottom: 25px;
        margin-top: 10px;
    }



    .checkbox-list {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .checkbox-item {
            width: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
    }

    .showtext {
        width: 100%;
        font-size: 14px;
        margin-bottom: 15px;

        span {
            font-weight: 550;
            color: #FF6201;
        }
    }
}

.el-dialog__body {
   width: 100%;
   background: #FFFFFF;
   padding: 0;
}
.dialog-page {
		width: 100%;
		display: flex;
		height: 600px;


		.dialog-navlist {
			overflow-y: auto;
			width: 170px;
			height: 100%;
			// padding: 15px 20px;

			.nav-lsit {
				width: 100%;
				height: 100%;
				overflow-y: auto;

				.nav-item {
					width: 100%;
					height: 50px;
					width: 100%;
					line-height: 50px;
					color: #50565d;
					background-color: #f5f9ff;
					margin-bottom: 12px;
					text-align: center;
					border-radius: 4px;

					&.on {
						background: #FF6201;
						color: #FFFFFF;
					}

				}
			}

		}

	}
.dialog-custom {
    flex: 1;
    background: #f5f9ff !important;
    padding: 20px;
    height: 100%;

    .dialog-main {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .dialog-item {
            width: 100%;
            border-radius: 10px;
            background: #FFFFFF;
            overflow: hidden;


            &:not(:first-child) {
                margin-top: 20px;
            }

            .dialog-tbox {
                width: 100%;
                height: 48px;
                padding: 0 40px;
                font-size: 16px;
                font-weight: 550;
                border-bottom: 1px solid #e4efff;
                display: flex;
                align-items: center;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 3px;
                    height: 14px;
                    background: #FF6201;
                }

                .tips {
                    font-size: 12px;
                    padding-left: 14px;
                    color: red;
                    font-weight: normal;
                }
            }

            .dialog-cont {
                width: 100%;
                padding: 30px;
                box-sizing: border-box;
            }

            .search-fitem {
                width: 100%;

                &.v70 {
                    width: 63.5%;
                }

                &.v50 {
                    width: 45%;
                }
            }

            .showtips {
                padding-left: 140px;
                font-size: 14px;
                color: red;
            }

            .file-box {
                width: 100%;
                margin-top: 20px;

                .file-title {
                    padding-left: 16px;
                    position: relative;
                    font-size: 16px;
                    font-weight: 550;
                    line-height: 1;

                    &:after {
                        content: '';
                        width: 3px;
                        height: 100%;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 0;
                        background: #FF6201;
                    }
                }

                .file-cont{
                    margin-top: 20px;
                }
            }

            .step {
                display: flex;
                width: 100%;
                background: #f6faff;
                margin-bottom: 60px;

                .step-item {
                    position: relative;
                    padding: 15px 30px;
                    background: #f6faff;

                    .content {
                        color: #50565d;
                        width: 250px;

                        div {
                            margin-block: 5px;
                        }
                    }

                    .bottom {
                        position: absolute;
                        bottom: -35px;
                        width: 100%;

                        .text {
                            position: absolute;
                            top: 25px;
                            left: -13px;
                            width: 50px;
                            text-align: center;
                        }

                        .round {
                            width: 24px;
                            height: 24px;
                            background-color: #FF6201;
                            border-radius: 50%;
                        }

                        .line {
                            display: inline-block;
                            width: 100%;
                            height: 4px;
                            background-color: #FF6201;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            margin-right: 15px;
                        }
                    }
                }
            }

        }
    }


    .el-form-item {
        width: 30%;

        &.vvv2 {
            width: 35%;
        }

        .search-vitem {
            width: 220px !important;

            &.v70 {
                width: 58% !important;
            }

            &.v100 {
                width: 100% !important;
            }
        }
    }

}
</style>
